<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>
    
    angular mock的使用 - 十
    
  </title>
  <meta name="description" content="">
  <link href="atom.xml" rel="alternate" title="十" type="application/atom+xml">
  <link rel="stylesheet" href="asset/css/foundation.min.css" />
  <link rel="stylesheet" href="asset/css/docs.css" />
  <script src="asset/js/vendor/modernizr.js"></script>
  <script src="asset/js/vendor/jquery.js"></script>
  <script src="asset/highlightjs/highlight.pack.js"></script>
  <link href="asset/highlightjs/styles/github.css" media="screen, projection" rel="stylesheet" type="text/css">
  <script>
    hljs.initHighlightingOnLoad();
  </script>
</head>

<body class="antialiased hide-extras">
  <div class="marketing off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
      <nav class="top-bar docs-bar hide-for-small" data-topbar>
        <div id="header">
          <h3><a href="index.html">十的对称 十的完美</a></h1>
        </div>
      </nav>
      <nav class="tab-bar show-for-small">
        <a href="javascript:void(0)" class="left-off-canvas-toggle menu-icon">
          <span> &nbsp;</span>
        </a>
        <div id="header">
          <h3><a href="index.html">十的对称 十的完美</a></h1>
        </div>
      </nav>
      <aside class="left-off-canvas-menu">
        <ul class="off-canvas-list">
          <li><a href="index.html">关于我</a></li>
          
          <li class="divider"></li>
          <li><label>Angular</label></li>
          
          <li><a title="angular mock的使用" href="16073237309370.html">angular mock的使用</a></li>
          
          
          <li class="divider"></li>
          <li><label>JavaScript</label></li>
          
          <li><a title="重新认识下熟悉的浏览器" href="16076922632055.html">重新认识下熟悉的浏览器</a></li>
          
          
          <li class="divider"></li>
          <li><label>重学前端--学习笔记</label></li>
          
          <li><a title="javascript原型和原型链" href="16080322533005.html">javascript原型和原型链</a></li>
          
          
        </ul>
      </aside>
      <a class="exit-off-canvas" href="#"></a>
      <section id="main-content" role="main" class="scroll-container">
        <div class="row">
          <div class="large-9 medium-9 columns">
  <div class="markdown-body">
  <div class="markdown-inside">
    <h1>angular mock的使用</h1>
    <time class="article-date" datetime="2020-12-07T14:48:50+08:00">发布于2020/12/07</time>
    <p>在现在公司中，并没有真的前后端分离，往往是前后端一同疏通测试，美其名曰节省时间全面发展。因此至今没有单独写过mock进行前端自己的单体测试。这一次调查下mock的使用。</p>

<h2 id="toc_0">Angular的environments文件</h2>

<p><img src="media/16073237309370/16073245939102.jpg" alt="" style="width:746px;"/></p>

<p>environments文件分别是每个环境对应的配置。<br/>
每个文件与环境的对应关系存放于<code>angular.json</code>中。</p>

<p><img src="media/16073237309370/16073266078090.jpg" alt="" style="width:555px;"/></p>

<p>这个设定指定了cli在进行<code>production build</code>的时候将<code>environment.ts</code>替换成<code>environment.prod.ts</code>，即将开发环境的环境配置替换成生产环境的开发配置。<br/>
在这里设置isMock属性，让mock在生产环境中自动启动，开发环境~~~~中自动关闭。</p>

<h2 id="toc_1">Angular的main.ts文件</h2>

<p><img src="media/16073237309370/16073284745167.jpg" alt="" style="width:555px;"/></p>

<p>同样在cli中webpack的入口程序被设置为<code>src/main.ts</code>，也就是说<code>main.ts</code>是我们整个angualr的入口程序。我们在这里判断当前环境是否引入mock服务。</p>

<p><img src="media/16073237309370/16073286403589.jpg" alt="" style="width:566px;"/></p>

<h2 id="toc_2">mock服务的实现</h2>

<h3 id="toc_3">1.选择自己的包管理器添加mock的指令安装mock</h3>

<pre><code class="language-text">npm install mockjs --save
</code></pre>

<pre><code class="language-text">yarn add mockjs
</code></pre>

<h3 id="toc_4">2.创建mock文件，并添加到打包配置文件中</h3>

<p>又是<code>angualr.json</code>，在scripts中添加自己的mock文件路径，让webpack打包angular时同时打包我们的mock文件。<br/>
<img src="media/16073237309370/16073291483432.jpg" alt="" style="width:541px;"/></p>

<h3 id="toc_5">3.编写mock服务</h3>

<ul>
<li><p>首先导入mockjs。</p>
<pre><code class="language-typescript">import * as Mock from &#39;mockjs&#39;;
</code></pre></li>
<li><p>然后拦截请求，返回假数据</p>
<pre><code class="language-typescript">Mock.mock(&#39;http://localhost:9080/list&#39;, {
message: &#39;调用成功&#39;,<br/>
&#39;data|10&#39;: [{<br/>
&#39;id|+1&#39;: 1,<br/>
title: &#39;This is a title&#39;,<br/>
tags: [<br/>
  {<br/>
    id: 1,<br/>
    name: &#39;aaaa&#39;,<br/>
    color: &#39;red&#39;<br/>
  }<br/>
],<br/>
&#39;note|100&#39;: &#39;There are notes!&#39;<br/>
}]<br/>
});
</code></pre></li>
</ul>

<h2 id="toc_6">最后鼓励下自己</h2>

<p>angular中如何加载mock服务就到这，mock中的精髓是通过代码来生成数据，一行代码就可以生成千万条带有逻辑的数据，这些还需要细读一下API。这次记录是通过编译打包时的顺序来记录mock的使用方法，今后需要更深入的理解angular要多多从这个方向调查问题。</p>

  </div>
</div>
<br /><br />
<hr />
<div class="row clearfix">
  <div class="large-6 columns">
    <div class="text-left" style="padding:15px 0px;">
      
      <a href="16076922632055.html" title="Previous Post: 重新认识下熟悉的浏览器">&laquo;
        重新认识下熟悉的浏览器</a>
      
    </div>
  </div>
  <div class="large-6 columns">
    <div class="text-right" style="padding:15px 0px;">
      
    </div>
  </div>
</div>
<div class="row">
  <div style="padding:0px 0.93em;" class="share-comments">
    
  </div>
</div>
<script type="text/javascript">
  $(function () {
    var currentURL = '16073237309370.html';
    $('#side-nav a').each(function () {
      if ($(this).attr('href') == currentURL) {
        $(this).parent().addClass('active');
      }
    });
  });
</script>  
          </div>
          <div class="large-3 medium-3 columns">
            <div class="hide-for-small">
              <div class="sidebar">
                <nav>
                  <ul id="side-nav" class="side-nav">
                    
                    <li class="side-title"><span>Angular</span></li>
                    
                    <li>
                      <a title="angular mock的使用" href="16073237309370.html">angular mock的使用</a>
                    </li>
                    
                    
                    <li class="side-title"><span>JavaScript</span></li>
                    
                    <li>
                      <a title="重新认识下熟悉的浏览器" href="16076922632055.html">重新认识下熟悉的浏览器</a>
                    </li>
                    
                    
                    <li class="side-title"><span>重学前端--学习笔记</span></li>
                    
                    <li>
                      <a title="javascript原型和原型链" href="16080322533005.html">javascript原型和原型链</a>
                    </li>
                    
                    
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
        <div class="page-bottom">
          <div class="row">
            <hr />
            <div class="small-9 columns">
              <p class="copyright">Contact Me&nbsp;
                Tel: +86 18641188786,&nbsp;
                mail: 416376663@qq.com</p>
            </div>
            <div class="small-3 columns">
              <p class="copyright text-right"><a href="#top">TOP</a></p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
  <script src="asset/js/foundation.min.js"></script>
  <script src="asset/js/foundation/foundation.offcanvas.js"></script>
  <script>
    $(document).foundation();
  </script>
  
  
  
</body>

</html>